<template>
  <div class="homeContainer">
    <left-nav style="flex-shrink: 0"/>
    <div class="rightView">
      <top-header/>
      <tags-view/>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" :key="$route.path + getCurData.reloadIndex"
                     v-if="$route.meta.keepAlive && !refresh"/>
        </keep-alive>
        <component :is="Component" :key="$route.path + + getCurData.reloadIndex"
                   v-if="!$route.meta.keepAlive && !refresh"/>
      </router-view>
    </div>
    <create-company-dialog
        v-model:visible="createCompanyDialogVisible"
        title="创建新公司"
    />

  </div>
</template>

<script setup>

import TopHeader from '@/components/topHeader.vue';
import TagsView from '@/components/tagsView.vue';
import LeftNav from '@/components/leftNav.vue';
import {getCurrentRouteDataRef} from "@/composition/useRouterLink.js";
import bus from "@/bus/mitt.js";
import CreateCompanyDialog from "@/components/createCompanyDialog.vue";

let getCurData = getCurrentRouteDataRef();

let refresh = ref(false);
bus.$on('refreshPage', () => {
  refresh.value = true;
  nextTick(() => {
    refresh.value = false;
  });
});
onMounted(() => {
  console.log('home mounted');
});

//------------------------------------------------2--------------------------------------------------------------------------
// 创建公司
const createCompanyDialogVisible = ref(false);
bus.$on('creatCompany', () =>{
  showCreateCompanyDialog();
});
const showCreateCompanyDialog = () => {
  createCompanyDialogVisible.value = true;
};
</script>

<style lang="scss">
.homeContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;

  .rightView {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .homeContainer {
    .rightView {
      width: 65%;
    }
  }
}
</style>
